<template>
    <div class="manage" style="height: 90% ;padding-bottom: 20px;overflow: hidden">

        <!--dialog弹出框-->
        <el-dialog :title="operateType ==='add' ? '新增商品信息':'更新商品信息'" :visible.sync="isShow">
            <common-form :formLabel="operateFormLabel" :form="operateForm"></common-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
        <div class="manage-header" style="display: flex;justify-content: space-between;align-items: flex-start">
            <el-button type="primary" v-on:click="addUser">+新增</el-button>
            <common-form  inline :formLabel="formLabel"  :form="searchFrom">
                <el-button type="primary" @serach>搜索</el-button>
            </common-form>
        </div>
<common-table-market :tableData="tableData" :tableLabel="tableLabel" :config="config" @changPage="getList" @edit="editUser" @del="delUser">

</common-table-market>

    </div>
</template>

<script>
    import  CommonForm from '../../components/CommonForm'
    import  CommonTableMarket from '../../components/CommonTableMarket'
    export default {
        name: "marketInfo",
        components:{
            CommonTableMarket,
            CommonForm
        },
        props:{
            userId:String
        },
        data(){
            return{
                isShow:false,
                operateType:'add',
                formLabel:[
                    {   model : 'keyword',
                        label:'',
                        optios:[]
                    }
                ],
                searchFrom: {
                    keyword: "",
                },
                //用来存表格数据
                tableData:[],
                //表格的头
                tableLabel:[
                    {
                        prop:'pcata',
                        label:'分类'
                    },
                    {
                        prop:'pname',
                        label:'商品名称'
                    },
                    {
                        prop:'pprice',
                        label:'价格',
                    },

                    {
                        prop:'pdes',
                        label:'评论',
                        width:320
                    }


                ],
                addConfim:{
                    flag:false
                },
                //配置信息，有关页面，是否需要加载，以及总共的数据条数
                config: {
                    page:'',
                    total:'',
                    loading:false
                },
                operateForm:{
                    pcata:"运动",
                    pname:'',
                    pprice: 13 ,
                    pdes:'',
                    objectId:''

                },
                //当操作表的时候传入的值
                operateFormLabel:[
                    {
                        model:'pcata',
                        label:'分类',
                    },
                    {
                        model:'pname',
                        label:'商品名称',
                    },

                    {
                        model:'pprice',
                        label:'价格',

                    },
                    {
                        model:'pdes',
                        label:'评论',
                    },
                ]
            }
        },
        methods:{
            //获取表单数据
            getList(){

                const query = Bmob.Query("Product");
                query.find().then(res => {
                    this.tableData = res
                    this.config.total = res.length
                    this.config.loading = false
                    console.log(res[0])
                });

            },
            //添加用户信息
            addUser(){
                this.operateType="add"
                this.isShow=true
                this.addConfim.flag=true


            },
            // 编辑的方法
            editUser(row){
                this.addConfim.flag=false
                this.operateType=""
                this.addConfim.flag=false
                this.isShow=true
                this.operateForm = row
                console.log(row.objectId)

            },
            //删除表单元素
            delUser(row){

                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    const query = Bmob.Query('Product');
                    query.destroy(row.objectId).then(res => {
                        console.log(res)
                        this.$message({
                            type: 'info',
                            message: '删除成功'

                        });
                        //进行重新加载
                        this.getList()
                    }).catch(err => {
                        console.log(err)
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    })



                });
            },
            // dialog点击确定提交表单操作
            confirm(){
                // 如果为真执行添加操作
                // pcata:'',
             //   pname:'',
                  //  pprice:'',
                 //   pdes:'',
                 //   objectId:''
                if(this.addConfim.flag){
                    console.log("添加"+this.addConfim.flag)
                    const query = Bmob.Query('Product');
                    query.set("pname",this.operateForm.pname)
                    query.set("pcata",this.operateForm.pcata)
                    query.set("pprice",this.operateForm.pprice)
                    query.set("pdes",this.operateForm.pdes)
                    query.save().then(res => {
                        //如果添加成功就刷新界面
                        this.getList();
                    }).catch(err => {
                        console.log(err)
                    })

                }
                //修改方法
                else{
                    console.log("修改"+this.addConfim.flag)
                    const query = Bmob.Query('Product');
                    query.get(this.operateForm.objectId).then(res => {
                        console.log(res)
                        res.set('pprice',this.operateForm.pprice)
                        res.set('pname',this.operateForm.pname)
                        res.set('pprice',this.operateForm.pprice)
                        res.set('pdes',this.operateForm.pdes)
                        res.save()
                        this.getList();
                    }).catch(err => {
                        console.log(err)
                    })
                }
                this.isShow= false

            }
        },
        //搜索
        serach(form){
            console.log("this.form")
        },
        created() {
            this.getList()

        },
    }

</script>

<style scoped>

</style>